<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <style>
      #slideShowImage{
         width: 300px;
          height: 300px;
          border: 4px solid green;
      }

      .btnGroup{
          margin-top: 50px;
      }

      p{
          font-size: 40px;
      }

      #blueBox{
          background-color: blue;
          height: 20px;
          width:100px;
      }
  </style>
</head>
<body>
<div class="container well">
<img id="slideShowImage" src="img/nature.jpg" />
<div class="btnGroup">
    <button class="btn btn-primary" id="prevBtn">Previous</button>
    <button class="btn btn-primary" id="nextBtn">Next</button>
</div>

    <div id="blueBox"> This text should animate </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript" >

    var imgCounter = 0;
    var images = ['nature.jpg', 'park.jpg', 'scene.jpg','tree.jpg','water.jpg'];
    // what to have as initial variables
    // what is the one changing thing which will solve the problem
    // what are the changing things // states

    // 0, 1, 2, 3, 4
    //images[5]; // undefined
    //images[6]; // undefined

    $('#nextBtn').click(function(){
        if(imgCounter <  (images.length - 1) ) {
            imgCounter++;
            $('#slideShowImage').attr('src', 'img/' + images[imgCounter]);
            $('#blueBox').animate({'height': '+=100px'},2000,'linear');

        }else{
            imgCounter = 0;
        }
    });

    $('#prevBtn').click(function(){
        if(imgCounter > 0) {
            imgCounter--;
            $('#slideShowImage').attr('src', 'img/' + images[imgCounter]);
            var blueBoxHeight =  parseInt($('#blueBox').css('height'),10);
           // $('#blueBox').css('height' , blueBoxHeight - 100 );

            $('#blueBox').animate({'height': '-=100px'},2000,'easeOutBack');
        }else{
            imgCounter = images.length - 1;

        }
    });




    // program
    // pen paper --
    //data structure
</script>

</body>
</html>